<template>
	<!-- 登录页 -->
	<view class="login-container">
		<view class="top-bg">
			<image class="img" src="/static/img/login_bg.png" alt="登录"></image>
		</view>
		<view class="login-form">
			<!-- 手机号登录 -->
			<uni-forms ref="userEntity" :modelValue="userEntity" :rules="rulesEntity" label-position="top" class="form">
				<uni-forms-item label="手机号" name="telPhone" class="forms-item">
					<uni-easyinput v-model="userEntity.telPhone" type="text" placeholder="请输入手机号"
						@input="binddata('telPhone',userEntity.telPhone,'userEntity')" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password" class="forms-item">
					<uni-easyinput type="password" v-model="userEntity.password" placeholder="请输入密码"
						@input="binddata('password',userEntity.password,'userEntity')" />
				</uni-forms-item>
				<button @click="login" class="button" type="primary">登录</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		data() {
			return {
				// 表单数据
				userEntity: {},
				rulesEntity: {
					//对手机号进行验证
					telPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, ]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 3,
								maxLength: 12,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					}
				}
			}
		},
		methods: {
			login() {
				this.$refs.userEntity.validate().then(async (res) => {
					post(api.Login, this.userEntity).then(res => {
						uni.setStorageSync('Token', res.data.token)
						uni.setStorageSync('userId', res.data.id)
						uni.switchTab({
							url: '/pages/index/index'
						})
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/css/Login.css';
</style>